<!DOCTYPE html>
<!-- saved from url=(0040)http://bl.ocks.org/mbostock/raw/4183330/ -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style>
			h1 {
				position: absolute;
				top: 500px;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				font-size: 18px;
				text-align: center;
				width: 960px;
			}
		</style>
		<style>
			@font-face {
				font-family: uc-nexus-iconfont;
				src: url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff) format('woff'), url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf) format('truetype')
			}
		</style>
		<style id="style-1-cropbar-clipper">
			/* Copyright 2014 Evernote Corporation. All rights reserved. */
			
			.en-markup-crop-options {
				top: 18px !important;
				left: 50% !important;
				margin-left: -100px !important;
				width: 200px !important;
				border: 2px rgba(255, 255, 255, .38) solid !important;
				border-radius: 4px !important;
			}
			
			.en-markup-crop-options div div:first-of-type {
				margin-left: 0px !important;
			}
		</style>
	</head>

	<body>
		<div id="test2"></div>
		<h2>Antarctica</h2>
		<script src="lib/3D_earth/d3.v3.min.js"></script>
		<script src="lib/3D_earth/queue.v1.min.js"></script>
		<script src="lib/3D_earth/topojson.v1.min.js"></script>
		<script>
			var width = 960,
				height = 960;

			var projection = d3.geo.orthographic()
				.translate([width / 2, height / 2])
				.scale(width / 2 - 20)
				.clipAngle(90)
				.precision(0.6);

			var canvas = d3.select("#test2").append("canvas")
				.attr("width", width)
				.attr("height", height);

			var c = canvas.node().getContext("2d");

			var path = d3.geo.path()
				.projection(projection)
				.context(c);

			var title = d3.select("h2");

			queue()
				.defer(d3.json, "static/data/3dearth_data/world-110m.json")
				.defer(d3.tsv, "static/data/3dearth_data/world-country-names.tsv")
				.await(ready);

			function ready(error, world, names) {
				if(error) throw error;

				var globe = {
						type: "Sphere"
					},
					land = topojson.feature(world, world.objects.land),
					countries = topojson.feature(world, world.objects.countries).features,
					borders = topojson.mesh(world, world.objects.countries, function(a, b) {
						return a !== b;
					}),
					i = -1,
					n = countries.length;

				countries = countries.filter(function(d) {
					return names.some(function(n) {
						if(d.id == n.id) return d.name = n.name;
					});
				}).sort(function(a, b) {
					return a.name.localeCompare(b.name);
				});

				(function transition() {
					d3.transition()
						.duration(1250)
						.each("start", function() {
							title.text(countries[i = (i + 1) % n].name);
						})
						.tween("rotate", function() {
							var p = d3.geo.centroid(countries[i]),
								r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
							return function(t) {
								projection.rotate(r(t));
								c.clearRect(0, 0, width, height);
								c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill();
								c.fillStyle = "#f00", c.beginPath(), path(countries[i]), c.fill();
								c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
								c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
							};
						})
						.transition()
						.each("end", transition);
				})();
			}

			d3.select(self.frameElement).style("height", height + "px");
		</script>
	</body>

</html>